<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
</head>
<body>
<div th:fragment="pzcurmainDetailSpecial">
    <form id="pzcurmainDetailSpecial_form">
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <textarea class="form-control" placeholder="请输入小纸条内容" id="pzcurmainDetailSpecial_content"
                              name="content"></textarea>
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group input-group">
                    <span class="input-group-append"> <button
                            type="button" class="btn btn-primary"
                            onclick="pzcurmainDetailSpecialObj.toggleUserModal(true)">选择查看人
                                        </button> </span>
                    <input type="text" class="form-control" placeholder="查看人员"
                           id="pzcurmainDetailSpecial_userNames"
                           name="userNames" readonly>
                    <div class="input-group-append">
                        <button class="btn btn-white" type="button"
                                onclick="pzcurmainDetailSpecialObj.userCleanHandler()"><i class="fa fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group pull-right">
                    <button type="submit" class="btn btn-primary">
                        保存
                    </button>
                    <button type="button" class="btn" onclick="pzcurmainDetailSpecialObj.deleteHandler()">
                        删除
                    </button>
                </div>
            </div>
        </div>
    </form>
    <!--弹窗：人员选择-->
    <div class="modal inmodal fade" id="pzcurmainDetailSpecial_Modal"
         tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span
                            class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="pzcurmainDetailSpecial_modalTitle">选择人员</h4>
                    <p id="pzcurmainDetailSpecial_modalDesc" class="font-bold text-danger"></p>
                </div>
                <div class="modal-body">
                    <div class="m-l-xs toolbar text-danger" id="pzcurmainDetailSpecial_table_toolbar">
                        搜索后显示结果
                    </div>
                    <table id="pzcurmainDetailSpecial_table_user" class="table table-striped"></table>
                    <div class="pull-right">
                        <button type="submit" class="btn btn-primary"
                                onclick="pzcurmainDetailSpecialObj.userSelectedHandler()">
                            确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#pzcurmainDetailSpecial_table_user').bootstrapTable({
                toolbar: '#pzcurmainDetailSpecial_table_toolbar',
                url: 'pz/cur/pzteacher',
                search: true,
                trimOnSearch: true,
                pagination: true,
                sidePagination: 'server',
                clickToSelect: true,
                formatNoMatches: function () {  //没有匹配的结果
                    return '暂无数据';
                },
                columns: [{
                    title: '#',
                    align: 'center',
                    width: 50,
                    checkbox: true,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    title: '姓名',
                    field: 'name',
                    width: 200,
                }, {
                    title: '所属部门',
                    field: 'deptName'
                }],
                responseHandler: function (res) {
                    return {
                        total: res.page.totalCount,
                        rows: res.page.list
                    };
                }
            });
            $('#pzcurmainDetailSpecial_Modal').on('show.bs.modal', function (event) {
                $('#pzcurmainDetailSpecial_table_user').bootstrapTable('resetSearch', '');
            })
            $('#pzcurmainDetailSpecial_form').validate({
                rules: pzcurmainDetailSpecialObj.dataRule,
                submitHandler: function (form) {
                    pzcurmainDetailSpecialObj.dataFormSubmit(form);
                }
            });
        })
        var pzcurmainDetailSpecialObj = new Object({
            id: undefined,
            userCodes: [],
            userNames: [],
            dataRule: {
                content: {
                    required: true,
                    maxlength: 1000
                },
                userNames: {
                    required: true
                }
            },
            init: function () {
                let _self = this;
                this.userCodes = [];
                this.userNames = [];
                $.myGet({
                    url: `/pz/cur/special/${pzcurmainDetailObj.mainId}`,
                    success: function (data) {
                        if (data && data.code === 0) {
                            let special = data.special;
                            if (special) {
                                _self.id = special.id;
                                _self.userCodes = special.userCodes;
                                _self.userNames = special.userNames;
                                $("#pzcurmainDetailSpecial_form").find(`[name="userNames"]`).val(_self.userNames.join(","))
                                $("#pzcurmainDetailSpecial_form").find(`[name="content"]`).val(special.content)
                            }
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            },
            toggleUserModal: function (show) {
                $('#pzcurmainDetailSpecial_Modal').modal(show ? 'show' : 'hide');
            },
            userSelectedHandler: function () {
                let _self = this;
                let selectUsers = $('#pzcurmainDetailSpecial_table_user').bootstrapTable('getSelections');
                if (selectUsers.length == 0) {
                    $.mySwalWarn("请选择人员");
                    return;
                }
                selectUsers.map(o => {
                    if (_self.userCodes.join(',').indexOf(o.workNo) == -1) {
                        if (_self.userCodes.length < 10) {
                            _self.userCodes.push(o.workNo);
                            _self.userNames.push(o.name)
                        } else {
                            $.mySwalWarn("选择人员超出10个无法添加");
                        }
                    }
                });
                $('#pzcurmainDetailSpecial_form').find('[name="userNames"]').val(_self.userNames.join(','));
                this.toggleUserModal(false)
            },
            userCleanHandler: function () {
                this.userCodes = [];
                this.userNames = [];
                $('#pzcurmainDetailSpecial_form').find('[name="userNames"]').val('');
            },
            dataFormSubmit: function (form) {
                let data = {
                    id: this.id,
                    content: $(form).find('[name="content"]').val(),
                    tpMainId: pzcurmainDetailObj.mainId,
                    userCodes: this.userCodes
                };
                $.myPost({
                    url: `/pz/cur/special/${data.id ? "update" : "save"}`,
                    dataType: 'json',
                    data: data,
                    success: function (data) {
                        if (data && data.code == 0) {
                            toastr.success(data.msg, '操作提示')
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            },
            deleteHandler:function () {
                let _self = this;
                $.mySwalConfirm("将删除小纸条，确认吗？", function () {
                    $.myDelete({
                        url: `/pz/cur/special/${pzcurmainDetailObj.mainId}`,
                        success: function (data) {
                            if (data && data.code == 0) {
                                toastr.success(data.msg, '操作提示')
                                this.userCodes = [];
                                this.userNames = [];
                                $("#pzcurmainDetailSpecial_form")[0].reset();
                            } else {
                                toastr.error(data.msg, '操作失败')
                            }
                        }
                    })
                });
            }
        })
    </script>
</div>
</body>
</html>